// ─────────────────────────────────────────────────────────────────────────────
// PAGE STYLES
// Interior pages have their own stylesheet for styles that only exist on
// that page. Any styles shared between pages, including repeated sections,
// should go into root.scss
// ─────────────────────────────────────────────────────────────────────────────

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #RPsbs-313 {
        padding: var(--sectionPadding);

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .cs-content {
            /* set text align to left if content needs to be left aligned */
            text-align: left;
            width: 100%;
            max-width: calc(542 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            /* centers content horizontally, set to flex-start to left align */
            align-items: flex-start;
        }

        .cs-text {
            margin-bottom: calc(16 / 16 * 1rem);
            &:last-of-type {
                margin-bottom: calc(32 / 16 * 1rem);
            }
        }

        .cs-quote {
            margin: 0 0 calc(32 / 16 * 1rem) 0;
            /* 16px - 32px */
            padding: clamp(1rem, 3vw, 2rem);
            background-color: #f7f7f7;
            border-radius: calc(16 / 16 * 1rem);
            position: relative;
        }

        .cs-quote-text {
            /* 14px - 16px */
            font-size: clamp(0.875rem, 1.5vw, 1rem);
            line-height: 1.5em;
            margin: 0 0 calc(16 / 16 * 1rem);
            color: #767676;
            display: block;
        }

        .cs-name {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.2em;
            text-transform: uppercase;
            font-weight: bold;
            margin: 0 0 calc(4 / 16 * 1rem);
            color: var(--headerColor);
            display: block;
        }

        .cs-job {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.5em;
            color: #767676;
            display: block;
        }

        .cs-quote-icon {
            /* 60px - 136px */
            width: clamp(3.75rem, 10vw, 8.5rem);
            height: auto;
            position: absolute;
            bottom: calc(0 / 16 * 1rem);
            /* 16px - 32px */
            right: clamp(1rem, 4vw, 2rem);
        }

        .cs-image-group {
            /* scaling the font size with the view width */
            font-size: min(2.31vw, 0.7em);
            /* using ems so we can use font size to scale the whole section */
            width: calc(631 / 16 * 1em);
            height: calc(636 / 16 * 1em);
            position: relative;
        }

        .cs-picture {
            border-radius: calc(24 / 16 * 1em);
            /* clips img tag corners */
            overflow: hidden;
            position: absolute;
            display: block;

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                /* makes image act like a background image */
                object-fit: cover;
            }
        }

        .cs-picture1 {
            width: calc(522 / 16 * 1em);
            height: calc(581 / 16 * 1em);
            left: 0;
            top: 0;
        }

        .cs-picture2 {
            width: calc(414 / 16 * 1em);
            height: calc(400 / 16 * 1em);
            background-color: #fff;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
            /* 6px - 12px */
            border: clamp(0.375em, 1.5vw, 0.75em) solid #fff;
            right: 0;
            bottom: 0;
        }
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #RPsbs-313 {
        .cs-container {
            flex-flow: row;
            justify-content: space-between;
            gap: calc(52 / 16 * 1rem);
        }

        .cs-image-group {
            font-size: min(1.2vw, 1em);
            flex: none;
        }

        .cs-content {
            margin: 0;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #RPsbs-313 {
            .cs-image-group {
                &:before,
                &:after {
                    background: var(--accent);
                }
            }

            .cs-picture2 {
                background-color: var(--dark);
                /* 6px - 12px */
                border: clamp(0.375em, 1.5vw, 0.75em) solid var(--dark);
            }

            .cs-topper {
                color: var(--primaryLight);
            }

            .cs-title,
            .cs-text,
            .cs-h3,
            .cs-quote-text,
            .cs-name {
                color: var(--bodyTextColorWhite);
            }

            .cs-quote {
                background-color: var(--accent);
            }

            .cs-job {
                color: var(--bodyTextColorWhite);
                opacity: 0.8;
            }

            .cs-quote-icon {
                opacity: 0.2;
            }
        }
    }
}
